<template>
	<view class="content">
		<view class="headTop">
			<view class="header">
				<!-- 定位 -->
				<view  class="position" @click="pageJump('../../pages2/position/position')">
					{{position}}
					<u-icon name="arrow-down" color="#ffffff" size="12"></u-icon>
				</view>
				<!-- 搜索 -->
				<view class="search">
					<u-search 
					    searchIconColor='#FF9800'  
						placeholder="搜索您的目的地" 
						:disabled='true' 
						@click="pageJump('../../pages2/search/search')"  
						v-model="keyword" 
						:show-action="false"
					></u-search>
				</view>
				<!-- 消息 -->
				<navigator url="../../pages2/chat/chat">
				<view class="message">
					<u-icon name="chat" color="#ffffff" size="30"></u-icon>
				</view>
				</navigator>
			</view>
		</view>
		<!-- 轮播图 -->
		 <view class="u-demo-block">
		    <!-- <text class="u-demo-block__title">卡片式</text> -->
		    <u-swiper
		         :list="list"
		         previousMargin="30"
		         nextMargin="30"
		         circular
				height="160"
		         :autoplay="true"
		         radius="10"
		        bgColor="#ffffff"
		    ></u-swiper>
		</view>
		<!-- 栏目 -->
		<view class="column">
			<view class="column_list">
				<u-button 
				    throttleTime='1000' 
					size='size' 
					color='#FF9800' 
					type="primary" 
					@click="pageJump('../../pages2/cheap/cheap')" 
					shape="circle" 
					text="限时特惠"
				></u-button>
				<u-button 
				    color='#FF9800' 
					type="primary" 
					shape="circle" 
					text="组团出行"
					@click="pageJump('../../pages2/group/group')"
				></u-button>
			</view>
		</view>
		<!-- 热门地点 -->
		<view class="hot">
			<text class="hotText">热门地点</text>
			<u-scroll-list :indicator="indicator" indicatorColor="#fff0f0" indicatorActiveColor="#f56c6c">
				
			    <view class="hotlist" v-for="(item, index) in list2" :key="index" @click="getHot(item)">
			        <image :src="item.thumb"></image>
					<text class="title">{{item.title}}</text>
					<!-- <text class="content">{{item.content}}</text> -->
					<u--text size='13' color='#5e5e5e' :lines="1" :text="item.content"></u--text>
			    </view>
			</u-scroll-list>
		</view>
		<!-- 优质养老院 -->
		<view class="recommend">
			<view class="recommend_title">
				<text>优质</text>养老院
			</view>
			<view class="wrap recommend_list">
				<view class="item u-border-bottom recommend_listItem" v-for="(item, index) in list3" :key="index" @click="getHot(item)">
					<image :src="item.thumb" mode=""></image>
					<text>{{item.title}}</text>
					<u--text size='13'  color='#5e5e5e'  :lines="1" :text='`地点:${item.content}`'></u--text>
				</view>
				<!-- <u-loadmore line="true" :status="status" /> -->
			</view>
			
			<view class="recommend_title">
				猜你<text>喜欢</text>
			</view>
			<view class="wrap recommend_list">
				<view class="item u-border-bottom recommend_listItem" v-for="(item, index) in list3" :key="index" @click="getHot(item)">
					<image :src="item.thumb" mode=""></image>
					<text>{{item.title}}</text>
					<u--text size='13'  color='#5e5e5e'  :lines="1" :text='`地点:${item.content}`'></u--text>
				</view>
				<u-loadmore line="true" :status="status" />
			</view>
		</view>
		
	</view>
	
	<!-- 注释 -->
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				position:'重庆',
				keyword: '',
				status: 'loadmore',
				lists: 6,
				page: 0,
				list: [
				    'https://www.zhuinw.com/uploads/20211024/659de28a301b0a3ac112d5c193196c3a.jpg',
				    'https://www.zhuinw.com/uploads/20211002/d15cff0f2acdad536f849d1d213c1171.jpg',
				    'https://www.zhuinw.com/uploads/20211002/810c4a727906fd12960902e5edef73df.jpg',
				],
				indicator: false,
				list2: [{
						thumb: "https://www.zhuinw.com/uploads/20210816/ef73469fd86f19ac1fba0b540502c42f.jpg",
						title:"泰康之家·大清谷",
						price:'7500~15000月',
						content:"浙江省杭州市西湖区清谷路333号",
						urlimg:"https://p3.itc.cn/q_70/images03/20210131/74fc2dcb72e34876b297f2dc9c8aebc9.jpeg",
						
					}, {
						thumb: "https://www.zhuinw.com/uploads/20210719/9eecaa4eebd1efadc3d2282dcdd58c18.jpg",
						title:"上海云栖兰亭养老社区",
						price:'5000~10000月',
						content:"上海市浦东新区宣桥镇宣中路298号",
						urlimg:"https://p1.itc.cn/q_70/images03/20210131/efa0de1aae1d42618de207f2576cae2a.jpeg",
					}, {
						thumb: "https://www.zhuinw.com/uploads/20200704/8e7000ca7bbd61e1d6f6c5916ad7595c.jpg",
						title:"重庆尚善养老院",
						price:'2300~6500月',
						content:"重庆市南岸区南山公园路118号",
						urlimg:"https://p5.itc.cn/q_70/images03/20210131/870225d989914c6384a47946c4bb096f.jpeg",
					}, {
						thumb: "https://www.zhuinw.com/uploads/20200421/47b41b2c93a50eabecbb482854a0529c.jpg",
						title:"广州泰成逸园养老院",
						price:'5000~7500月',
						content:"金沙洲建设大道2号万达广场旁",
						urlimg:"https://p7.itc.cn/q_70/images03/20210131/7f66629f3e584ef38c5c5dd30ec9f0fa.jpeg",
						
					}],
				list3: [
					    {
							thumb: "https://www.zhuinw.com/uploads/20200704/8e7000ca7bbd61e1d6f6c5916ad7595c.jpg",
							title:"重庆尚善养老院",
							price:'2300~6500月',
							content:"重庆市南岸区南山公园路118号",
							urlimg:"https://p6.itc.cn/q_70/images03/20210131/e4008afdb7f9481f82c55855591361e5.jpeg"
						}, {
							thumb: "https://www.zhuinw.com/uploads/20201211/e047313e80592af56991729777144d95.jpg",
							title:"千禾养老庞各庄养老院",
							price:'3000~7700月',
							content:"福海养老服务中心南",
							urlimg:"https://p2.itc.cn/q_70/images03/20210131/7e4e6c18661f43c88d0b61c0bd91cc11.jpeg"
						}, {
							thumb: "https://www.zhuinw.com/uploads/20190801/e9d6f690bbd19373e3c11920a8c8e097.jpg",
							title:"暄康养养老服务中心",
							price:'5000~10000月',
							content:"天府新区天府大道南段2039号4栋",
							urlimg:"https://p9.itc.cn/q_70/images03/20210131/d7f5a477b2604d8283e94e1d7400bd4b.jpeg"
						}, {
							thumb: "https://www.zhuinw.com/uploads/20220315/38ff7f14cb1c8b5a01b9869ff07d0adb.jpg",
							title:"泰和睿园养老社区",
							price:'5500~7000月',
							content:"北京市房山区西潞街道良坨路",
							urlimg:"https://p4.itc.cn/q_70/images03/20210131/741d26b796ac4b8b8e2cfb2c2861dcf9.jpeg"
						}
				],
			}
		},	
		onLoad() {
			// uni.$on('site',function(data){
			// 	// this.position=data.msg
			// 	console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
				
			// })
			uni.$on('site',(data)=>{
				this.position=data.msg
				console.log(data.msg)
			})
		},
		onUnload() {  
	    // 移除监听事件  
	        uni.$off('site');  
		},
		onReachBottom() {
					if(this.page >= 3) return ;
					this.status = 'loading';
					this.page = ++ this.page;
					setTimeout(() => {
						this.list3.length += 0;
						if(this.page >= 0) this.status = 'nomore';
						else this.status = 'loading';
					}, 2000)
				},
		methods: {
			pageJump(value){
				uni.navigateTo({
				  // url:'../position/position'
				  url:value
				})
			},
			getHot(item){
                var mynavData = JSON.stringify(item); // 这里转换成 字符串
				uni.navigateTo({
					url:'../../pages2/goodchoice/goodchoice?Data='+mynavData,
					// success: function(res) {
					//     // 通过eventChannel向被打开页面传送数据
					//     res.eventChannel.emit('acceptDataFromOpenerPage', { data: item})
					//   }
				})
			}
			// getsite(){
			// 	uni.$on('site',function(data){
			// 		this.position=data.msg
			// 		console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
			// 	})
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.headTop{
			width: 100%;
			margin-bottom: 20px;
			background: #FF9800;
			.header{
				width: 90%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: auto;
				padding: 5px 0;
				.position{
					color: #FFFFFF;
					display: flex;
					align-items: center;
					font-size:30rpx;
				}
			}
			
		}
		.u-demo-block{
			
			width: 100%;
			margin-bottom: 20px;
		}
		.column{
			width: 100%;
			.column_list{
				width: 90%;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				letter-spacing:5px;
				/deep/ .u-button{
					width: 45%;
					margin: 0;
					.u-button__text{
						font-size: 48rpx;
					}
				}
			}
			
		}
		.hot{
			margin-top: 20px;
			width: 100%;
			.hotText{
				margin-left: 5%;
				font-size: 42rpx;
				font-weight: 900;
				
			}
			/deep/ .hotlist{
				margin-left: 5%;
				margin-top: 20px;
				line-height: 25px;
				image{
					border-radius: 5px;
					width: 230px;
					height: 120px;
				}
				.title{
					font-size: 34rpx;
					font-weight: 600;
				}
				
			}
		}
		.recommend{
			width: 90%;
			margin: 20px auto;
			.recommend_title{
				font-size: 42rpx;
				font-weight: 600;
				text{
					border-radius: 10px;
					background: #FF9800;
					color: #FFFFFF;
					padding: 5px;
					margin-right: 10px;
				}
			}
			.recommend_list{
				width: 100%;
				margin-top: 20px;
				display: flex;
				justify-content: space-between;
				flex-wrap:wrap;
				.recommend_listItem{
					width: 47%;
					margin-bottom: 20px;
					line-height: 30px;
					image{
						border-radius: 10px;
						width: 100%;
						height:240rpx;
					}
					text{
						font-size: 32rpx;
						font-weight: 600;
						overflow: hidden;/*超出部分隐藏*/
						text-overflow:ellipsis;/* 超出部分显示省略号 */
						white-space: nowrap;/*规定段落中的文本不进行换行 */
						width: 165px;/*需要配合宽度来使用*/
					}
					/deep/ .u-text__value{
						overflow: hidden;/*超出部分隐藏*/
						text-overflow:ellipsis;/* 超出部分显示省略号 */
						white-space: nowrap;/*规定段落中的文本不进行换行 */
						width: 140px;/*需要配合宽度来使用*/
					}
				}
			}
		}
		
			
			.item {
				padding: 24rpx 0;
				color: $u-content-color;
				font-size: 28rpx;
			}
	}
</style>
